<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 300px;height: 240px;position: absolute;left:0;top:0;}
    .box h2{margin: 0;line-height: 40px;background: #222;color:#fff;cursor: move;}
    .box .cont{height: 210px;background: #ccc;}
  </style>
</head>
<body>
  <div class="box">
    <h2>标题</h2>
    <div class="cont">
      内容区域
    </div>
  </div>
</body>
<script>
  var box = document.querySelector(".box")
  var h2 = box.querySelector("h2");

  // 在谁身上按下，就把按下事件加给谁
  h2.onmousedown = function(eve){
    var downE = eve || window.event;

    downE.preventDefault();
    
    document.onmousemove = function(eve){
      var moveE = eve || window.event;

      // 拖拽时要移动谁，就修改谁的位置
      box.style.left = moveE.pageX - downE.offsetX + "px"
      box.style.top = moveE.pageY - downE.offsetY + "px"
    }

    document.onmouseup = function(){
      document.onmousemove = null;
    }
  }



</script>
</html>